<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>el和data的两种写法</title>
</head>
<body>
<!--
    el、data的两种写法、
      el的两种写法
        1。new vue  时配置el属性
        2。先创建vue实例   然后通过实例 vm.$mount("#root")指定el值
       data的两种写法
        1。new vue 时 配置data数据 以对象的形式配置数据
        2。函数式
          如何选择：  目前学习的时候可以使用对象形式，   当学习组件时data就要用函数式  否则会报错
        备注：
          vue实例管理的函数，一定不要写箭头函数   一旦使用尖头函数  那么this. 只想的就不是当前vue实例了
-->
  <div id="root">
    <h1>你好{{name}}</h1>
  </div>

  <script>
    //el的两种写法
  /* const v=new Vue({
      //el:'#root',    //第一种写法
      data:{
        name:'张三'
      }
    })
    console.log(v)
    v.$mount("#root");   //第二种写法
    */
    //data 的两种写法
      new Vue({
        el:'#root',
        //第一种写法 对象式
       /* data:{
          name:'张三'
        }
        */
        //第二种方式  函数是
        data(){
          console.log("@@@",this)   //此处的this是当前的vue实例
          return{
            name:'1111'
          }
        }
      })


  </script>
</body>
</html>